<template>
    <div>
      <m-head title="编辑收货地址"></m-head>
      <div class="formbox">
        <form>
          <ul>
            <li>
              <input type="text" placeholder="收货人" v-model="info.name" class="item">
              <p v-if="nameError">收货人不能为空！</p>
            </li>
            <li>
              <input type="text" placeholder="联系方式" v-model="info.phone" class="item">
              <p v-if="phoneError">请填写正确的联系方式！</p>
            </li>
            <li>
              <input type="text" placeholder="收货地址" v-model="info.address" class="item">
              <p v-if="addressError">收货地址不能为空！</p>
            </li>
            <li v-if="isEdit">
              <button class="del" type="submit" @click.prevent="delAddress()">删 除</button>
            </li>
            <li>
              <button class="add" type="submit" @click.prevent="isEdit ? updateAddress() : address()">提 交</button>
            </li>
          </ul>
        </form>
      </div>
    </div>
</template>

<script>
import MHead from './MHeader'
import * as info from '../api/info'
import router from '../router/index'
export default {
  name: 'edit-address',
  data () {
    return {
      order: false,
      id: 0,
      isEdit: false,
      nameError: false,
      phoneError: false,
      addressError: false,
      info: {
        name: '',
        phone: '',
        address: '',
        checked: false
      }
    }
  },
  components: {
    'm-head': MHead
  },
  mounted () {
    if (this.$route.query.id) {
      this.id = this.$route.query.id
      this.isEdit = true
    }
    if(this.$route.query.order){
      this.order = true
    }
    this.getAddress(this.id)
  },
  methods: {
    getAddress (id) {
      info.getAddress(id)
        .then(res => {
          this.info = res.data
        })
    },
    addAddress () {
      let that = this;
      if (!this.info.name) {
        this.nameError = true
      } else {
        this.nameError = false
      }
      if (!(/^1[34578]\d{9}$/.test(this.info.phone))) {
        this.phoneError = true
      } else {
        this.phoneError = false
      }
      if (!this.info.address) {
        this.addressError = true
      } else {
        this.addressError = false
      }
      if (!this.phoneError && !this.nameError && !this.addressError) {
        console.log(JSON.stringify(this.info))
        info.addAddress(this.info)
          .then(res => {
            if (res.code === 200) {
              console.log('添加成功')
              if(that.order){
                router.push('/order')
              }else{
                router.push('/myaddress')
              }
            }
          })
      }
    },
    updateAddress () {
      if (!this.info.name) {
        this.nameError = true
      } else {
        this.nameError = false
      }
      if (!(/^1[34578]\d{9}$/.test(this.info.phone))) {
        this.phoneError = true
      } else {
        this.phoneError = false
      }
      if (!this.info.address) {
        this.addressError = true
      } else {
        this.addressError = false
      }
      if (!this.phoneError && !this.nameError && !this.addressError) {
        info.updateAddress(this.id, JSON.stringify(info))
          .then(res => {
            console.log(res)
          })
      }
    },
    address () {
      if (this.isEdit) {
        this.updateAddress()
      } else {
        this.addAddress()
      }
    },
    delAddress () {
      info.delAddress(this.id)
        .then(res => {
          if (res.code === 200) {
            console.log('删除成功')
            router.push('/myaddress')
          }
        })
    }
  }
}
</script>

<style scoped>
.formbox{
  padding: .3rem;
}
.formbox li{
  margin-bottom: .3rem;
}
.formbox li input.item{
  display: block;
  width: 100%;
  line-height: 1rem;
  border: 1px solid #d1d1d1;
  padding-left: 10px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.formbox li p{
  color: #f00;
  font-size: .33rem;
  padding: .1rem 0 0 10px;
}
.formbox li img{
  width: .5rem;
}
.formbox li:last-child{
  border-bottom: none;
}
.formbox li:last-child{
  height: auto;
}
.formbox li button.del{
  font-size: .4rem;
  height: 1rem;
  line-height: 1rem;
  background: #f1f1f1;
  border: 1px solid #d1d1d1;
  display: block;
  width: 100%;
  color: #666;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.formbox li button.add{
  width: 4.6rem;
  height: 1rem;
  line-height: 1rem;
  border: none;
  background: #ed702d;
  color: #fff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  margin: 1.5rem auto 0;
  display: block;
  font-size: .4rem;
}
</style>
